<route lang="json5" type="notice">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '公告',
  },
}
</route>
<template>
  <view class="notice_container">
    <view class="title_box">
      <img src="../../static/images/ic_voyage_tab_back.png" />
      <text>{{ t('notice.noticeTitle') }}</text>
    </view>
    <view class="search_box">
      <wd-input
        type="text"
        v-model="value"
        :placeholder="t('notice.noticeSearchHint')"
        prefix-icon="search"
      />
      <text>{{ t('notice.searchBtn') }}</text>
    </view>
    <view class="list_box">
      <view class="item" v-for="(item, index) in dataList" :key="index">
        <view class="first_row">
          <img src="../../static/images/ic_bulletin_board_notice.png" />
          <text>{{ item.title }}</text>
        </view>
        <view class="second_row">
          <text>{{ item.date }}</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
defineOptions({
  name: 'Notice',
})
const value = ref('')
// 获取屏幕边界到安全区域距离
// const { safeAreaInsets } = uni.getSystemInfoSync()

// 测试 uni API 自动引入
// onload(() => {})
const dataList = reactive([
  {
    title: '交通运输部关于修改《中华人民共和国海员外等等等等等等等等》',
    date: '2023-10-11 10:01:30',
  },
  {
    title: '交通运输部关于印发《港口及其一线人员新冠等等等等等等等等》',
    date: '2022-12-12 12:49:08',
  },
])
</script>
<style lang="scss" scoped>
.notice_container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #f8f9fb;
  .title_box {
    position: relative;
    width: 100vw;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    background-color: #295699;

    img {
      position: absolute;
      top: 50%;
      left: 30rpx;
      width: 26rpx;
      transform: translateY(-50%);
    }
    text {
      color: #fff;
    }
  }
  .search_box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80rpx;
    background-color: #fff;
    .wd-input {
      width: 75vw;
      padding: 0 30rpx;
      margin-right: 20rpx;
      background-color: #f3f3f3;
      border: none;
      border-radius: 32px;
      ::v-deep .uni-input-placeholder {
        font-size: 22rpx;
        color: #868686;
      }
      ::v-deep .wd-input__inner {
        height: 52rpx;
      }
      ::v-deep .wd-input__icon {
        vertical-align: top;
      }
      ::v-deep .wd-icon-search::before {
        background-color: #f3f3f3;
      }
      &::after {
        display: none;
        height: 0;
      }
    }
    text {
      font-size: 24rpx;
      color: #636363;
    }
  }
  .list_box {
    background-color: #fff;
    .item {
      padding: 30rpx 30rpx 12rpx 30rpx;
      border-bottom: 2rpx solid #fcfcfc;
      .first_row {
        display: flex;
        justify-content: space-between;
        img {
          width: 40rpx;
        }
        text {
          display: inline-block;
          width: 91%;
          overflow: hidden; /* 隐藏超出的内容 */
          font-size: 28rpx;
          color: #696968;
          text-overflow: ellipsis; /* 显示省略号 */
          white-space: nowrap; /* 不换行 */
        }
      }
      .second_row {
        text-align: right;
        text {
          font-size: 22rpx;
          color: #afafaf;
        }
      }
    }
  }
}
</style>
